<!--后台登陆页面-->
<template>
    <el-container>
      <el-row>
        <el-col :span="10" :offset="2">
          <img src="../assets/pic/login-left-bg.png" width="612" height="400" alt>
        </el-col>

        <el-col :span="10" :offset="2" class="lBoxRight">
          <el-card>
            <div class="login-subject">音乐后台管理登陆页面</div>
            <el-form :rules="rules" :model="user" ref="formRef" status-icon>
              <el-form-item prop="username">
                <el-input v-model="user.username" class="w-50 m-2" placeholder="请输入用户名" maxlength="20" minlength="2" size="large" clearable  validate-event>
                  <template #prefix>
                    <el-icon><User/></el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item prop="password">
                <el-input v-model="user.password" class="w-50 m-2" type="password" placeholder="请输入6~13位密码" minlength="6" maxlength="13" size="large" show-password clearable validate-event>
                  <template #prefix>
                    <el-icon><Lock/></el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item>
                <div class="btn-submit">
                  <el-button type="primary" size="large" @click="submitForm()">登陆</el-button>
                </div>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-container>
</template>

<script setup>

import {ref, getCurrentInstance, reactive} from 'vue'
import  axios from 'axios'
import router from "@/router";

//登陆密码改为：1qA~0z  ***************莫要忘记

//组合式API中setup方法传入了两个变量,props和context,context作为上下文取代this,但是context中只有emit,attrs和slots而直接在setup中使用
//this,会出问题，所以可以使用getCurrentInstance()获取实例
//Vue3 Element-Plus消息提示$message的使用
const msg = getCurrentInstance().appContext.config.globalProperties.$message

//表单ref
let formRef= ref();

//表单数据
let user=reactive({
  username:"",
  password:""
})

//表单验证规则
let rules=reactive({
  username:[
    {
      required:true,
      message: '用户名不能为空!',
      trigger: 'blur'
    }
  ],
  password:[
    {
      required:true,
      message: '密码不能为空!',
      trigger: 'blur'
    },
    {
      min: 6,
      max: 13,
      message: '密码长度必须在6～13位',
      trigger: 'blur'
    }
  ]
})

//提交表单
 function submitForm() {
    //验证表单数据
    formRef.value.validate(async valid => {
      if(!valid){ msg.error("数据校验失败！"); return}
      //发送数据请求
      const options = {
        url: '/user/login',
        data: {username: user.username, password: user.password},
        method: 'post',
        headers: {'Content-Type': 'application/json'}
      };

      axios(options).then(res => {
        let mg = res.data;
        if (mg.meta.code === 200) {
          //如果登陆成功，将token保存在localStorage中，并跳转页面
          msg.success(mg.meta.msg);
          sessionStorage.setItem("token", mg.data.token);
          router.push("/home");
        } else {
            msg.error(mg.meta.msg);
        }
      }).catch(err => {
        msg.error(err);
      })
    });
 }
</script>

<style scoped>
.el-container{
  padding: 147px 0;
  background-image: url("../assets/pic/loginbg.png");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  box-sizing: border-box;
  overflow: auto;
}

.lBoxRight{
  margin-top: 80px;
  padding-left: 150px;
}

.el-input{
  width: 300px;
}

.login-subject{
  margin: 10px auto;
  text-align: center;
  color: darkorange;
}

.btn-submit{
  margin:auto;
}
</style>
